<template>
  <div class="petitionReport">
    <div class = "tabTitle">
			<span>请示报告</span>
		</div>
    <div class="search">
			<div class = "searchLeft">
        <div style = "display: inline-block;margin-top:22px;" v-if = "role === 'manage'">
					<span>公司名称：</span>
					<el-select v-model = "queryParam.orgId" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option :label = "'全部'" :value = "''"></el-option>
						<el-option v-for = "(item, index) in OrgOptions" :key = "index" :label = "item.orgName" :value = "item.id"></el-option>
					</el-select>
				</div>
        <div style = "display: inline-block; margin-top:22px;">
					<span>报告名称：</span>
					<el-input v-model = "queryParam.title" placeholder = "请输入内容" style = "width:154px;margin-right:20px" clearable></el-input>
				</div>
        <div style="display: inline-block;margin-right:12px;margin-top:22px;">
					<span class = "demonstration">上传时间：</span>
            <el-date-picker
              placeholder = "开始日期"
              style = "width:160px;margin-right:12px"
              v-model = "queryParam.reportTime" 
              :clearable = "true"
              value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
              :picker-options="startPickerOptions"
            ></el-date-picker>至
            <el-date-picker
              placeholder = "结束日期"
              style = "width:160px;margin-left:12px"
              v-model = "queryParam.endLocalDate"
              :clearable = "true"
             value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :picker-options="endPickerOptions"
            ></el-date-picker>
				</div>
				<el-button type = "primary" style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "query">查询</el-button>
				<el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "resetQueryParam">重置</el-button>
			</div>
      <div style="margin-top:22px;" v-if="role === 'upload'">
				<el-button type="primary" style = "width:80px;margin-left: 12px;padding:0px;height:36px" v-if = "role === 'upload' && this.permissionBycode.includes(this.code + '_upload-xz')" icon="el-icon-plus"  @click="create">创建</el-button>
			</div>
		</div>
    <div class="table_data">
			<tableComponent ref= "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" />
		</div>
		<div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
    <!-- <div class="content">
      <div class="content_table_data">
        <PetitionTable></PetitionTable>
      </div>
    </div> -->
  </div>
</template>
<script>
// import  PetitionTable from "./PetitionTable"
let _that;
export default {
  components:{
    // PetitionTable,
    tableComponent: () => import('../comonComponent/table'),
  },
  data(){
    return{
      code:'jdjb-qsbg',
      queryParam: {
        orgId: '', // 公司ID(管理端-公司名称下拉选择框选择下拉列表里面的公司则传公司ID)
        title: '', // 报告名称
        reportTime: '', // 报告上传时间
        endLocalDate: ''
      },
      // 公司名称options
      OrgOptions: [],
      startPickerOptions: {
        disabledDate(time) {
          return _that.queryParam.endLocalDate ? (time.getTime() >= new Date(_that.queryParam.endLocalDate).getTime()) : ''
        }
      },
      endPickerOptions: {
        disabledDate(time) {
          return _that.queryParam.reportTime ? (time.getTime() <= new Date(_that.queryParam.reportTime).getTime()) : ''
        }
      },
      //表格数据
      tableData: [ ],
      tableLabel: [
        { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
        { prop : 'orgName', label : '公司名称 ', minWidth: '580', fixed : false, render : false, align : 'center'},
        { prop : 'title', label : '报告名称 ', minWidth: '400 ', fixed : false, render : false, align : 'center'},
        { prop : 'reportTime', label : '上传时间 ', minWidth: '220', fixed : false, render : false, align : 'center'},
       { prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
          render : (h, params, data) => { 
            return h( 'span', {}, [ 
              h( "el-button", {style: {display: (this.role === 'manage' && this.permissionBycode.includes(this.code + '_manage-xq')) ||  (this.role === 'upload' && this.permissionBycode.includes(this.code + '_upload-xq')) ? '' : 'none'}, class:'', props:{ size: 'mini' }, on : {
                click : () => {
                  // console.log('预览')
                  // console.log(params.row)
                  // sessionStorage.setItem('InstructionsDetail', JSON.stringify(params.row))
                  // this.$router.push({path: '/index/SuperviseAndReport/Instructions/InstructionsDetail', query:{id:params.row.id, type:'view'}})
                  window.open(this.$store.state.PortalManagement.fileIp + params.row.attachList[0].url, '_blank');
                }
              } }, '预览' ), 
              h( "el-button", {style: {display: (this.role === 'manage' && this.permissionBycode.includes(this.code + '_manage-xz')) || (this.role === 'upload' && this.permissionBycode.includes(this.code + '_upload-xz')) ? '' : 'none'}, class:'', attrs :{} , props:{ type: 'primary', size: 'mini' }, on : {
                click : () => {
                  console.log('下载')
                }
              } }, '下载'),
            ])
          } 
        }
      ],
      tableOption : {
        loading: false,
        stripe: false,
        highlightCurrentRow : false,
        border : true,
        height : 610,
        maxHeight : '',
        resizable: false,
        headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
        cellStyle: {height: '50px', padding: 0 }
      },
      // 分页配置参数
      paginationPageSizes: [10, 30, 50],
      paginationParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
    } 
  },
  computed:{
    permissionBycode(){
      return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
    },
    role() {
      if (this.permissionBycode.includes(this.code + '_manage')) {
        this.getInstructionsOrglist()
        return 'manage'
      } else if (this.permissionBycode.includes(this.code + '_upload')) {
        return 'upload'
      } else {
        return ''
      }
    },
  },
  mounted() {
    _that = this
    this.queryData()
    if(this.role === 'upload') {
      this.tableLabel.splice(1, 1)
    }
  },
  methods: {
    // 公司名称下拉列表
    getInstructionsOrglist () {
      this.Api.getInstructionsOrglist().then(res => {
        if (res.code === '0') {
          this.OrgOptions = res.data
        } else {
          this.OrgOptions = []
        }
      })
    },
    // 信访举报的数据列表数据获取
    queryData () {
      let data  = JSON.parse(JSON.stringify(this.queryParam))
      data.pageSize = this.paginationParam.pageSize.toString()
			data.pageNum = this.paginationParam.pageNum.toString()
      let request = this.role === 'manage' ? this.Api.getInstructionsList(data) : this.Api.getInstructionsReportlist(data)
      request.then(res => {
        if (res.code === '0') {
          this.tableData = res.data.records
          this.paginationParam.total = res.data.total
        } else {
          this.tableData = []
          this.paginationParam.total = 0
        }
      })
    },
    // 查询
    query() {
      console.log('查询')
      this.queryData()
    },
    // 搜索栏重置事件
    resetQueryParam() {
      Object.assign(this.$data.queryParam, this.$options.data().queryParam)
      this.queryData()
    },
    // 分页pageSize 改变触发事件 
    handleSizeChange(val) {
      this.paginationParam.pageSize = val
      this.queryData()
    },
    // 分页currentPage 改变触发事件
    handleCurrentChange(val) {
      this.paginationParam.pageNum = val
      this.queryData()
    },
    // 创建
    create() {
      this.$router.push({path: '/index/SuperviseAndReport/Instructions/InstructionsDetail', query:{type:'create'}})
    }
  }
}
</script>
<style lang="less" scoped>
.petitionReport {
		width: 100%;
		padding:20px 20px 10px 20px;
		margin-bottom: 20px;
		background: #fff; 
		.tabTitle {
			line-height: 28px;
			font-size: 20px;
			color: #333333;
			font-weight: 600;
			user-select:none;
		}
		.search {
			margin: 20px 0;
			width:100%;
			display: flex;
			/deep/ .el-input__inner {
			height: 36px;
			}
			/deep/.el-icon-date
			{
			line-height: 36px;
			position: absolute;
				left: 120px;
			}
			/deep/.el-icon-arrow-up{
			line-height: 36px;
			}
			.searchLeft {
				flex: 1;
			}
		}
		.table_data {
			flex: 1;
		}
		.pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding-top:20px;
			padding-bottom:20px;
			line-height: normal;
			}
		}
	}
</style>
